<template>
	<view>
		<view class="cu-card">
			<view class="cu-item padding bg-img shadow-blur bg-gradual-theme">
				<view class="flex" style="align-items: center;">
					<view class="text-cut text-xxl">累计收益<text class="margin-left text-xxm">{{moenyList.sum_money || '0'}}</text></view>
				</view>
				<view class="content margin-top-sm">
					<view class="flex text-center text-grey shadow-warp" style="padding: 20upx 0;background: rgba(255,255,255,0.4);;">
					  <view class="flex flex-sub flex-direction solid-right" bindtap='toPraise'>
					    <view class="text-xl text-orange">{{moenyList.cash_money || '0'}}</view>
					    <view class="text-black">
					      <text class="cuIcon-attentionfill"></text>
						  <text class="text-df">已提现</text>
						</view>
					  </view>
					  <view class="flex flex-sub flex-direction solid-right" bindtap='toAttention'>
					    <view class="text-xl text-blue">{{moenyList.will_money || '0' }}</view>
					    <view class="text-black">
					      <text class="cuIcon-favorfill"></text>
						  <text class="text-df">即将到账</text>
						 </view>
					  </view>
					  <view class="flex flex-sub flex-direction" @tap='goToWithdraw'>
					    <view class="text-xl text-green">{{moenyList.success_money || '0'}}</view>
					    <view class="text-black">
					      <text class="cuIcon-fork"></text>
						  <text class="text-df">可提现</text>
						</view>
					  </view>
					</view>
				</view>
			</view>
		</view>
		<view  :class="isFixed?'fixed':''" id="navbar">
			<view class="cu-bar bg-white flex justify-between align-center">
			   <button class="cu-btn bg-white" @click="lastMonth"  :disabled="!izprev">
			      <text class="cuIcon-back"></text>上个月
			   </button>
			   <view v-if="currentYear">
					<picker mode="date" :value="date" fields="month" start="2020-01" :end="endData" @change="chooseMonth">
						<view class="picker">
							{{currentYear}} - {{currentMonth+1}}
						</view>
					</picker>
			   </view>
			   <button class="cu-btn bg-white" v-model="izNext" :disabled="!izNext" @click="nextMonth">
			      下个月<text class="cuIcon-right"></text>
			   </button>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub":class="index==active?'text-theme cur':''"v-for="(item, index) in menuList" :key="index" @tap="CheckProfitType(index)" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<view v-if="!profitList.length" class="empty" style="height: 100%;">
			   <view style="margin-top: 120upx;text-align: center">
				   <view class="text-cut text-lg margin-top-sm">暂无数据</view>
			   </view>
			</view>
			<view class="cu-list" v-else>
				<view class="cu-item bg-white padding" style="display: flex;width:100%;justify-content: space-between;" v-for="(item, index) in profitList" :key="index">
					<view class="content">
						<view class="text-cut text-sm">
							创建时间：<text class="text-grey text-sm">{{checktime(item.create_time)}}</text>
							<text class="text-grey text-sm">{{item.mobile}}</text>
						</view>
						<view class="text-sm flex">
							<view v-if="active===2">
								<text>状态: {{unixCashStatus(item.cash_statues)}}</text>
							</view>
							<view class="text-cut" v-else>
								<view>
									<text>状态: {{unixProfitStatus(item.profit_status)}}</text><text class="margin-left" v-if="item.order_pay_price">价格: ￥{{item.order_pay_price}}</text>
								</view> 
								<view v-if="item.buyer_name && item.good_name">
									<text>描述: {{item.buyer_name || ''}} 购买了 {{item.good_name|| ''}}</text>
								</view> 
							</view>
						</view>
					</view>
					<view class="action" style="min-width: 130rpx;display: flex;justify-content: center;align-items: center;" v-if="item.gold">
						<view class="text-theme text-df margin-right-sm">金币  {{active===2?'-':'+'}}{{parseInt(item.gold)}}</view>
					</view>
				</view>
				<view class="loading-text" v-if="finished && profitList.length">{{ loadingText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Profit_API from '../../../api/member/profit.js'
	import * as Foundation from '@/utils/Foundation.js'
	export default {
		data() {
			name:'profit'
			return {
				active:0,
				totalProfit:1999,
				menuList:["累计收益","即将到帐","已提现"],
				currentYear:'',
				currentMonth:'',
				nowYear:'',
				nowMonth:'',
				izDataShow:false,
				date:"",
				params:{
					page_no:2,
					page_size:20,
					member_id :uni.getStorageSync('userInfo').id,
				},
				moenyList:{},
				profitList:[],
				izNext:false,
				izprev:false,
				endData:'', // 结束日期,
				finished:false,
				loadingText:'加载完毕',
				navbarInitTop: 0,
				isFixed: false, 
			};
		},
		watch:{
			// active(newVal) {
			// 	this.active = newVal
			// 	if(this.active=== 1){
			// 		this.params.flag = 'W'
			// 	} else if(this.active=== 2){
			// 		this.params.flag = 'Y'
			// 	} else if(this.active=== 0){
			// 		this.params.flag = 'S'
			// 	}
			// }
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.initDay()
				this.GET_ProfitSumMoney()
				let dataArr = []
				let month = this.currentMonth+1
				if(month<10){
					month = '0'+month
				}
				dataArr.push(this.currentYear,month)
				this.data = dataArr.join('-')
				this.params.date = this.data
				// dataArr.push(this.currentYear,this.currentMonth+1)
				// this.data = dataArr.join('-')
				// this.params.date = this.data
				this.finished = false
				this.params.page_no = 1
				this.profitList = []
				this.CheckProfitType(this.active)
			}, 200);
		},
		onReachBottom(){
			setTimeout(()=> {
				this.params.page_no +=1
				this.GET_ProfitList(this.active)
			}, 200);
		},
		
		onShow() {
			console.log('active',this.active)
			this.initDay()
			this.GET_ProfitSumMoney()
			this.CheckProfitType()
			// this.GET_ProfitList()
			//获取当前组件到顶部的高度
			if (this.navbarInitTop == 0) {
			  wx.createSelectorQuery().select('#navbar').boundingClientRect((rect) => {
			    if (rect && rect.top > 0) {
			      var navbarInitTop = rect.top;
			      this.navbarInitTop = navbarInitTop
			    }
			  }).exec();
			}    
		},
		onPageScroll(e) {
		    var scrollTop = e.scrollTop;
		    var isSatisfy = scrollTop >= this.navbarInitTop;
			if (this.isFixedTop == isSatisfy) {
			      return false;
			    }else {
			      this.isFixed = isSatisfy
			    }
		},
		filters: {
			toFixed:function(x) {
				if(x){
					return parseFloat(x).toFixed(2);
				}else{
					return 0
				}	
			}
		},
		methods:{
			initDay() {
			    //获取当前选择的年月日
			   let date = new Date()
			   let currentYear = date.getFullYear(),
			     currentMonth = date.getMonth()
			   //获取当年，当月的天数 getDate()，此时month+1
			   let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
			   this.currentYear = currentYear
			   this.currentMonth = currentMonth
			   this.monthNum = monthNum
			   this.nowYear = currentYear //这里的now代表今天对应的日期，存在data中，点击回到今天时再从data中取出
			   this.nowMonth = currentMonth
			   // nowYear+'-'+(nowMonth+1).toString()
			   let endyear = this.nowYear+''
			   let month = this.nowMonth+1<10?'0'+ (this.nowMonth+1)+'':this.nowMonth+1+''
			   this.endData = endyear+'-'+month
			   this.izprev = true
			},
			chooseMonth(e){
				this.date = e.detail.value
				let dateArr = this.date.split('-')
				this.params.date = e.detail.value
				this.currentYear = parseInt(dateArr[0])
				this.currentMonth = parseInt(dateArr[1])-1
				
				this.active = this.active
				if(parseInt(this.currentYear) <= parseInt(this.nowYear)){
					// console.log('99999999999',this.currentMonth,this.nowMonth)
					if(this.currentMonth<=this.nowMonth &&this.currentMonth+1>1){
						this.izprev = true
					}else{
						this.izprev = false
					}
					if(this.currentMonth >= this.nowMonth){
						this.izNext = false
					}else{
						this.izNext = true
					}
				}else{
					this.izprev = false
				}
				this.CheckProfitType(this.active)
			},
			lastMonth() {
				this.active = this.active
				this.izNext = true
			      //计算余数，除以12之后的余数便是要减的月份数
			      let Remainder = this.currentMonth % 12;
			      if (this.currentMonth < 1) {
			          //parseInt(this.currentMonth / 12) 计算整数，得到的值就是要减的年
			          //如果当前选择的月份是负数，需要减整数后再-1
			         var currentYear = this.currentYear - 1 - parseInt(this.currentMonth / 12)
			         var currentMonth = 12 - Math.abs(Remainder) - 1
			      } else {
			         var currentYear = this.currentYear + parseInt(this.currentMonth / 12)
			         var currentMonth = Remainder - 1
			      }
			      let monthInt = parseInt(this.currentMonth / 12)
			      this.currentYear = currentYear
			      this.currentMonth = currentMonth
					let dataArr = []
					let month = this.currentMonth+1
					if(month<10){
						month = '0'+month
					}
					dataArr.push(this.currentYear,month)
					this.data = dataArr.join('-')
					this.params.date = this.data
					this.checkIzNext()
					if(parseInt(this.currentYear) <= parseInt(this.nowYear)){
						if(this.currentMonth<this.nowMonth &&this.currentMonth>=1){
							this.izprev = true
						}else{
							this.izprev = false
						}
					}else{
						this.izprev = false
					}
					this.CheckProfitType(this.active)
			},
			nextMonth() {
				this.active = this.active
				this.izprev = true
			      let Remainder = (this.currentMonth + 1) % 12;
			      if (Remainder < 0) {
			         var currentYear = this.currentYear - 1 - parseInt(Remainder / 12)
			         var currentMonth = 12 - Math.abs(Remainder)
			      } else {
			         // console.log(Remainder)
			         var currentYear = Remainder == 0 ? this.currentYear + 1 : this.currentYear + parseInt(Remainder / 12)
			         var currentMonth = Remainder
			      }
			      let monthInt = parseInt(this.currentMonth / 12)
			      // let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
			      this.currentYear = currentYear
			      this.currentMonth = currentMonth
			      let dataArr = []
			      let month = this.currentMonth+1
			      if(month<10){
			      	month = '0'+month
			      }
			      dataArr.push(this.currentYear,month)
			      this.data = dataArr.join('-')
			      this.params.date = this.data
			      this.checkIzNext()
			      this.CheckProfitType(this.active)
			},
			checkIzNext(){
				if(parseInt(this.currentYear)>parseInt(this.nowYear)){
					this.izNext = false
				}
				if(this.currentMonth>=this.nowMonth){
					this.izNext = false
				}
			},
			GET_ProfitList(e){
				// this.profitList = []
				// this.CheckProfitType(e)
				if (!this.finished){
					Profit_API.getProfitList(this.params).then(res =>{
						if(res.data.length<1 || !res.data){
							this.finished = true
							this.loadingText = '到底了'
						}else{
							this.profitList = [...this.profitList,...res.data]
							this.loadingText = '查看更多'
						}
					})
				}
			},
			CheckProfitType(e){
				if(e || e+''==='0'){
					this.active = e
					this.scrollLeft = (this.active - 1) * 60
				}else{
					this.scrollLeft = (this.active - 1) * 60
				}
				let {flag} = this.params
				if(this.active=== 1){
					this.params.flag = 'W'
				} else if(this.active=== 2){
					this.params.flag = 'Y'
				} else{
					this.params.flag = 'S'
				}
				this.finished = false
				this.params.page_no = 1
				this.profitList = []
				this.GET_ProfitList()
			},
			GET_ProfitSumMoney(){
				let params = {
					member_id:uni.getStorageSync('userInfo').id
				}
				Profit_API.getProfitSumMoney(params).then(res =>{
					this.moenyList = res
					uni.setStorageSync('money',res)
				})
			},
			unixProfitStatus(status) {
			  switch (status) {
			    case 'SUCCESS':
			      return '已经到账'
			    case 'WILL':
			      return '即将到账'
			  }
			},
			unixCashStatus(status) {
			  switch (status) {
			    case 'SUCCESS':
			      return '已提现'
			    case 'FAIL':
			      return '失败' 
				case 'DEAL':
				  return '处理中'
			  }
			},
			goToWithdraw(){
				if(this.moenyList.success_money>0){
					uni.navigateTo({
						url:'./withdrawal?money='+this.moenyList.success_money+'&active='+this.active
					})
				}
			},
			checktime(date){
				return Foundation.unixToDate(date)
			}
		}	
	}
</script>

<style lang="scss">
.fixed {
  position: fixed;
  z-index: 19999;
  top:0;
  width: 100%;
}
</style>
